<!--
  文件描述：
  创建时间：2023/9/8 11:36
  创建人：二
-->
<template>
  <div class="m-page-wrap">
    <div class="m-table-wrap">
      <div class="m-btn-list">
        <el-button
          type="primary"
          v-has-permit="['system:menu:add']"
          @click="handleAdd()">
          新增
        </el-button>
      </div>
      <m-table
        :columns="columns"
        :data="tableData"
        :loading="loading"
        row-key="id"
        :tree-props="treeProps"
        :show-pagination="false"
      >
        <template #action="{ row }">
          <el-link
            type="primary"
            :underline="false"
            v-has-permit="['system:menu:edit']"
            @click="handleEdit(row)"
          >
            编辑
          </el-link>
          <el-link
            type="danger"
            :underline="false"
            v-has-permit="['system:menu:remove']"
            @click="handleDelete(row)"
          >
            删除
          </el-link>
        </template>
      </m-table>
    </div>
    <Edit ref="edit"/>
  </div>
</template>

<script>
import { menuTreeApi} from '@/api/system/menu'
import Edit from './edit'
export default {
  name: 'Menu',
  components: {
    Edit
  },
  data() {
    return {
      loading: false,
      tableData: [],
      columns: [
        { label: '名称', prop: 'name', align: 'left' },
        { label: 'ID', prop: 'id', align: 'center' },
        { label: '权限标识', prop: 'role', align: 'center' },
        { label: '操作', prop: 'action', align: 'center', slotName: 'action', width: 150, fixed: 'right' }
      ],
      treeProps: {
        children: 'children'
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      menuTreeApi().then(result => {
         this.tableData = result.data;
       }).finally(() => {
         this.loading = false;
       })
    },
    // 新增
    handleAdd() {
      this.$refs.edit.open();
    },
    // 编辑
    handleEdit() {

    },
    // 删除
    handleDelete() {
      this.mixinMessageBoxConfirm('此操作将删除该数据, 是否继续?').then(({instance, done}) => {
        setTimeout(() => {
          done();
          setTimeout(() => {
            instance.confirmButtonLoading = false;
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }, 300);
        }, 2000);
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>

</style>
